<template>
  <div class="me">
    <router-view class="view"></router-view>
    <div class="title">我的</div>
    <div class="userInfo-wrap">
      <div class="user-info">
        <div class="avatar">
          <img :src="avatar"
               alt="">
        </div>
        <div class="user">
          <div class="name">{{name}}</div>
          <div class="phone">{{phone}}</div>
        </div>
      </div>
      <div class="user-type"
           :class="{vip: isVip}">{{type}}</div>
    </div>
    <ul class="list"
        v-show="show">
      <li class="item"
          v-for="(item, index) of dataList"
          :key="index"
          @click="handleSubPage(item.path)">
        <div class="iconfont icon"
             :class="item.outClassName"></div>
        <div class="sub-page"
             border-bottom-1px>
          <p class="item-content">{{item.content}}</p>
          <div class="iconfont sub-icon"
               :class="item.insetClassName"></div>
        </div>
      </li>
    </ul>
    <component-tab></component-tab>
  </div>
</template>

<script>
import ComponentTab from 'common/tabBar'
export default {
  name: 'Me',
  components: {
    ComponentTab
  },
  data () {
    return {
      type: '普通用户',
      show: true, // 控制路由
      isVip: false,
      dataList: [
        {
          outClassName: 'icon-scdizhi',
          insetClassName: 'icon-xiangyou',
          content: '地址',
          path: '/me/address'
        },
        {
          outClassName: 'icon-qia',
          insetClassName: 'icon-xiangyou',
          content: '特赞卡',
          path: '/me/like'
        },
        {
          outClassName: 'icon-activate',
          insetClassName: 'icon-xiangyou',
          content: '激活卡劵',
          path: '/me/activation'
        },
        {
          outClassName: 'icon-dingdan',
          insetClassName: 'icon-xiangyou',
          content: '订单中心',
          path: '/me/order'
        },
        {
          outClassName: 'icon-fankui',
          insetClassName: 'icon-xiangyou',
          content: '意见反馈',
          path: '/me/opinion'
        },
        {
          outClassName: 'icon-guanyu',
          insetClassName: 'icon-xiangyou',
          content: '关于我们',
          path: '/me/about'
        }
      ],
      avatar: '', // 头像
      name: '', // 用户名
      phone: '',
      scrollHight: document.documentElement.clientHeight
    }
  },
  methods: {
    handleSubPage (path) {
      this.$router.push({ path })
    },
    getUserInfo () {
      const storage = this.$localStorage
      const SUCC = '登录成功'
      const status = storage.get('loginStatus')
      if (status === SUCC) {
        this.avatar = storage.get('avatar')
        this.name = storage.get('userName')
        this.phone = storage.get('phone')
        const vip = storage.get('vip')
        if (parseInt(vip) === 0) {
          this.isVip = false
          this.type = '普通用户'
        } else {
          this.isVip = true
          this.type = 'VIP'
        }
      }
    }
  },
  activated () {
    this.getUserInfo()
  }
}

</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.me
  width 100%
  padding-top 20px
  box-sizing border-box
  background-color #fff

  .view
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    background-color #fff
    z-index 100

  .title
    text-align center
    line-height 164px
    width 100%
    font-size $me
    font-weight 400
    color $common_fz_color

  .userInfo-wrap
    padding()
    display flex
    justify-content space-between
    margin-bottom 60px

    .user-info
      height 124px
      display flex

    .avatar
      width 120px
      height 120px
      border-radius 50%
      margin-right 30px
      border 2px solid $service

      img
        width 100%
        border-radius 50%

    .user
      padding-top 22px
      box-sizing border-box

      .name
        font-size $shop_name
        font-weight 500
        color $common_fz_color
        line-height 54px
        max-width 370px
        ellipsis()

      .phone
        font-size $common_fz
        color $location
        line-height 46px

.user-type
  font-size 24px
  margin-top 22px
  font-weight 500
  color $location

.vip
  color $service

.list
  width 100%

  .item
    display flex
    justify-content space-between
    height 111px

    &:nth-of-type(1)
      color #039789

    &:nth-of-type(2)
      color #F45E5A

    &:nth-of-type(3)
      color #8d6e63

    &:nth-of-type(4)
      color #5A8FF4

    &:nth-of-type(5)
      color $service

    &:nth-of-type(6)
      color #9E9E9E

    .icon
      width 92px
      height 100%
      display flex
      justify-content center
      align-items center
      font-size $shop_name

    .sub-page
      flex 1
      height 100%
      display flex
      justify-content space-between
      align-items center
      padding()

      .item-content
        font-size $shop_name
        font-weight 500
        color $sub_page

      .sub-icon
        font-size $common_fz
        color $sub_icon
</style>
